<template>
  <el-menu
    v-if="!$route.path.includes('/login')"
    class="nav-menu"
    mode="horizontal"
    :default-active="activeIndex"
    background-color="rgba(255, 255, 255, 0.7)"
    text-color="#333"
    active-text-color="#409EFF"
  >
    <div class="nav-left">
      <span class="logo">MyBlog</span>
    </div>
    <div class="nav-center">
      <el-menu-item index="1" @click="$router.push('/')">首页</el-menu-item>
      <el-menu-item index="2" @click="$router.push('/detail')">详情</el-menu-item>
    </div>
    <div class="nav-right">
      <el-switch
        :model-value="isDarkMode"
        active-text="夜间"
        inactive-text="日间"
        @change="toggleDarkMode"
      />
      <el-divider direction="vertical" />
      <el-avatar 
          :size="24" 
          src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
          class="user-avatar-mini"
          style="margin-right: 10px"
        />
      <a href="https://github.com" target="_blank" class="github-icon">
        <svg viewBox="0 0 24 24" width="24" height="24">
          <path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
        </svg>
      </a>
      <el-divider direction="vertical" />
      <el-button type="primary" @click="$router.push('/login')">登录</el-button>
      <el-button type="text" @click="handleLogout">退出</el-button>
    </div>
  </el-menu>
</template>

<script setup>
import { ref, inject } from 'vue';
import {ElMessage, ElMessageBox} from "element-plus";
import {useRouter} from "vue-router";
import useUserInfoStore from "@/stores/userInfo.js";
import {useTokenStore} from "@/stores/token.js";

const userInfoStore = useUserInfoStore();
const router = useRouter();
const tokenStore = useTokenStore();

const activeIndex = ref('1');
const isDarkMode = inject('isDarkMode');
const toggleDarkMode = inject('toggleDarkMode');

const handleLogout = () => {
    ElMessageBox.confirm(
        '你确定要退出吗？',
        '温馨提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
    )
        .then(async () => {
          // 清除pinia中的信息
          tokenStore.removeToken();
          userInfoStore.removeInfo();
          // 回到登录页面
          router.push('/login');
          ElMessage({
            type: 'success',
            message: '退出成功',
          })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '已取消',
          })
        })
};
</script>

<style lang="scss" scoped>
.nav-menu {
  border-radius: 12px;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  margin: 20px auto;
  max-width: 1200px;

  .el-menu-item {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform-origin: center;
    &:hover {
      transform: scale(1.05) translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    &.is-active {
      animation: pulse 0.5s cubic-bezier(0.4, 0, 0.6, 1);
      transform: scale(1.08);
      box-shadow: 0 4px 16px rgba(64, 158, 255, 0.3);
    }
    @keyframes pulse {
      0%, 100% { transform: scale(1.08); }
      50% { transform: scale(1.12); }
    }
  }

  .nav-left {
    display: flex;
    align-items: center;
    padding: 0 10px;
    .logo {
      font-weight: bold;
      font-size: 1.2rem;
    }
  }
  
  .nav-center {
    display: flex;
    align-items: center;
  }
  
  .nav-right {
    display: flex;
    align-items: center;
    gap: 15px;
    .github-icon {
      display: flex;
      align-items: center;
      color: inherit;
      &:hover {
        opacity: 0.8;
      }
    }
  }
}
</style>